<template>
  <div class="goods-item flex" @click="handleDetail(detail)">
    <div class="goods-image flex-none">
      <div class="jingxuan">
<!--        <img  :src="detail.showImg"/>-->
        <van-image :src="detail.showImg" fit="cover">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <span class="recommend-tag" v-if="detail.tag === '1' || detail.tag === '3'">{{ $t("component.favoriteList.1") }}</span>
      </div>
    </div>
    <div class="goods-info flex-auto width0">
      <div class="goods-title text-ellipsis-2">{{ detail.name }}</div>
      <div class="flex flex-justify-content-between" style="margin-top: 10px">
        <div class="goods-price">{{ detail.price | num2Money }} KZ</div>
        <div class="goods-favorite">
          <van-icon style="font-weight: bolder" name="like-o" color="#595959;" v-login @click.stop="handleFavorites(detail)" />
          <!-- <van-icon name="like" color="#FB8C24" /> -->
        </div>
      </div>
      <div class="user-info mt15">
        <div class="user-info-item">
          <van-image v-if="detail.portrait&&detail.portrait.startsWith('http')" :src="detail.portrait" width="12" height="12" style="margin-right: 3px" round />
          <van-image v-else :src="domain + detail.portrait" width="12" height="12" style="margin-right: 3px" round />
          <!-- <van-image :src="domain + detail.portrait" width="12" height="12" round style="margin-right: 3px"></van-image> -->
          <span class="mr10 ml5">{{ detail.creatorNick }}</span>
        </div>
<!--        <div class="user-info-item">-->
<!--          <van-icon name="phone"></van-icon>-->
<!--          <span class="mr10 ml5">{{ detail.telephone }}</span>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import { Domain } from "@/constants";
import { isLogin } from "@/utils";
import Api from "@/api";
export default {
  name: "GoodsItem",
  props: {
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      domain: Domain,
    };
  },
  methods: {
    handleFavorites(val) {
      if (!isLogin()) {
        this.$router.push("/login");
      } else {
        const params = {
          commodityId: val.id,
        };
        Api.addFavorites(params).then((res) => {
          if (res === "SUCCESS") {
            this.$toast("success!");
          } else {
            this.$toast("cancel success!");
          }
        });
      }
    },
    handleDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.goods-item {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  box-sizing: border-box;
  overflow: hidden;
  .goods-image {
    margin-right: 8px;
    width: 50%;
    height: 140px;
    .jingxuan {
      position: relative;
      width: 100%;
      height: 100%;
      .van-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 140px;
      }
      .recommend-tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
  .goods-info{
    padding: 10px 10px 5px 8px;
  }
  .goods-title {
    color: #666;
    font-size: 14px;
  }
  .goods-desc {
    font-size: 12px;
    color: #666;
    margin: 8px 0;
    overflow: hidden;
    // max-height: 60px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .goods-price {
    color: #333;
    font-size: 15px;
    font-weight: bold;
  }
  .user-info {
    font-size: 12px;
    color: #999999;
    display: flex;
    flex-direction: column;
    .user-info-item{
      display: flex;
      align-items: center;
      margin-top: 5px;
    }
  }
}
</style>
